<html manifest="IGNORE.manifest"  lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/index.css"  th:href="@{${uiPath} + ${appName} + '/css/index.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" th:href="@{${uiPath} + ${appName} + '/css/reset.css'}" />
    <link rel="stylesheet" type="text/css" href="../css/CLSRZ.css"  th:href="@{${uiPath} + ${appName} + '/css/CLSRZ.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/zdialog.css"  th:href="@{${uiPath} + ${appName} + '/css/zdialog.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/webuploader.css"  th:href="@{${uiPath} + ${appName} + '/css/webuploader.css'}"/>
    <script type="text/javascript" src="../js/flexible.js" th:src="@{${uiPath} + ${appName} + '/js/flexible.js'}"></script>
</head>
<body>
<div class="rzzong">
    <form id="commentForm" th:action="@{'/designerUser/wltSave'}" method="post">
        <div class="gtoubu">
            <a href="CLSSingle.html"><img class="fanhui" src="../images/raw_1503386635.png" alt="" th:src="@{${uiPath} + ${appName} + '/images/raw_1503386635.png'}"></a>
            <p class="biaoti">上传物料图</p>
        </div>

        <div class="renzhengtishi">
            <img class="dingwei dingweiyixa" src="../images/raw_1503289426.png" alt=""th:src="@{${uiPath} + ${appName} + '/images/raw_1503289426.png'}">
            <div class="kuaiw"></div>
            <input type="hidden" name="demandId" th:value="${demandId}">
            <div id="shctp1">
                <div id="uploader-demo" style="width: 10rem">
                    <div id="filePickerd" class="zhaopianbeijing" style="width: 10rem"></div>
                    <div id="fileList" class="xqtu uploader-list" style="width: 10rem;"></div>
                </div>
                <input type="hidden" id="img1" name="wuliaotu">

                <!--   <div class="xqtu">
                   <input id="xhdui" class="shanchuantp" type="file" >
                </div>
                <div class="imageBox">
                      <div class="thumbBox"></div>
                      <div class="spinner" style="display: none">Loading...</div>
                 </div>  -->
            </div>

            <!--       <div id="shctp2">
                       <div id="uploader-demo">
                           <div id="filePickerd2" class="zhaopianbeijing"></div>
                           <div id="fileList2" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img2" name="imgUrl2">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp3">
                       <div id="uploader-demo">
                           <div id="filePickerd3" class="zhaopianbeijing"></div>
                           <div id="fileList3" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img3" name="imgUrl3">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp4">
                       <div id="uploader-demo">
                           <div id="filePickerd4" class="zhaopianbeijing"></div>
                           <div id="fileList4" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img4" name="imgUrl4">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp5">
                       <div id="uploader-demo">
                           <div id="filePickerd5" class="zhaopianbeijing"></div>
                           <div id="fileList5" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img5" name="imgUrl5">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp6">
                       <div id="uploader-demo">
                           <div id="filePickerd6" class="zhaopianbeijing"></div>
                           <div id="fileList6" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img6" name="imgUrl6">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp7">
                       <div id="uploader-demo">
                           <div id="filePickerd7" class="zhaopianbeijing"></div>
                           <div id="fileList7" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img7" name="imgUrl7">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp8">
                       <div id="uploader-demo">
                           <div id="filePickerd8" class="zhaopianbeijing"></div>
                           <div id="fileList8" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img8" name="imgUrl8">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp9">
                       <div id="uploader-demo">
                           <div id="filePickerd9" class="zhaopianbeijing"></div>
                           <div id="fileList9" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img9" name="imgUrl9">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp10">
                       <div id="uploader-demo">
                           <div id="filePickerd10" class="zhaopianbeijing"></div>
                           <div id="fileList10" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img10" name="imgUrl10">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp11">
                       <div id="uploader-demo">
                           <div id="filePickerd11" class="zhaopianbeijing"></div>
                           <div id="fileList11" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img11" name="imgUrl11">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp12">
                       <div id="uploader-demo">
                           <div id="filePickerd12" class="zhaopianbeijing"></div>
                           <div id="fileList12" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img112" name="imgUrl12">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp13">
                       <div id="uploader-demo">
                           <div id="filePickerd13" class="zhaopianbeijing"></div>
                           <div id="fileList13" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img13" name="imgUrl13">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp14">
                       <div id="uploader-demo">
                           <div id="filePickerd14" class="zhaopianbeijing"></div>
                           <div id="fileList14" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img14" name="imgUrl14">

                   </div>
                   <div id="shctp15">
                       <div id="uploader-demo">
                           <div id="filePickerd15" class="zhaopianbeijing"></div>
                           <div id="fileList15" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img15" name="imgUrl15">
                   </div>
                   <div id="shctp16">
                       <div id="uploader-demo">
                           <div id="filePickerd16" class="zhaopianbeijing"></div>
                           <div id="fileList16" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img16" name="imgUrl16">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp17">
                       <div id="uploader-demo">
                           <div id="filePickerd17" class="zhaopianbeijing"></div>
                           <div id="fileList17" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img117" name="imgUrl17">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp18">
                       <div id="uploader-demo">
                           <div id="filePickerd18" class="zhaopianbeijing"></div>
                           <div id="fileList18" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img18" name="imgUrl18">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp19">
                       <div id="uploader-demo">
                           <div id="filePickerd19" class="zhaopianbeijing"></div>
                           <div id="fileList19" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img19" name="imgUrl19">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>
                   <div id="shctp20">
                       <div id="uploader-demo">
                           <div id="filePickerd20" class="zhaopianbeijing"></div>
                           <div id="fileList20" class="xqtu uploader-list"></div>
                       </div>
                       <input type="hidden" id="img20" name="imgUrl20">

                       &lt;!&ndash;   <div class="xqtu">
                          <input id="xhdui" class="shanchuantp" type="file" >
                       </div>
                       <div class="imageBox">
                             <div class="thumbBox"></div>
                             <div class="spinner" style="display: none">Loading...</div>
                        </div>  &ndash;&gt;
                   </div>-->


        </div>
    </form>
    <div class="kuaiw"></div>
    <div class="nextx" th:onclick="'zengjiaTp()'">
        <p class="nextdd">增加一张</p>
    </div>
    <div class="kuaiw"></div>
    <div class="nextx" onclick="save()">
        <p class="nextdd">完成</p>
    </div>

</div>



<script type="text/javascript" src="../js/jquery.min.js" th:src="@{${uiPath} + ${appName} + '/js/jquery.min.js'}"></script>
<script type="text/javascript" src="../js/CLSRZ.js" th:src="@{${uiPath} + ${appName} + '/js/CLSRZ.js'}"></script>
<script type="text/javascript" src="../js/webuploader.min.js" th:src="@{${uiPath} + ${appName} + '/js/webuploader.min.js'}"></script>
<script type="text/javascript" src="../js/zdialog.js" th:src="@{${uiPath} + ${appName} + '/js/zdialog.js'}"></script>
<script type="text/javascript" src="../js/scsjt.js" th:src="@{${uiPath} + ${appName} + '/js/scsjt.js'}"></script>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" th:src="'http://res.wx.qq.com/open/js/jweixin-1.2.0.js'"></script>

<script th:inline="javascript">
    var size=2;
    function zengjiaTp(){
        if(size>=20){
            alert("最多添加20张图片");

        }else{
            var div = " <div class=\"kuaiw\"></div>\n <div id=\"shctp"+size+"\">\n" +
                "                <div id=\"uploader-demo\" style=\"width: 10rem\">\n" +
                "                    <div id=\"filePickerd"+size+"\" class=\"zhaopianbeijing\" style=\"width: 10rem\"></div>\n" +
                "                    <div id=\"fileList"+size+"\" class=\"xqtu uploader-list\" style=\"width: 10rem\"></div>\n" +
                "                </div>\n" +
                "                <input type=\"hidden\" id=\"img"+size+"\" name=\"wuliaotu"+size+"\">\n" +
                "                \n" +
                "            </div>";
            $('.renzhengtishi').append(div);

            initUploader1(size)
            size++
        }


    }
    window.onload = function() {
        initUploader();

    };

    function  save() {
        $.ajax({
            type:'post',
            url:$('#commentForm').attr('action'),
            data:$('#commentForm').serialize(),
            dataType:'json',
            success:function (result) {
                if(result.code==1){
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交成功", Content:result.data ,BtnL:"确定",BtnR:"取消"})
                }else{
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "已存在此需求单的案例，如需修改请点击修改", Content:result.data  ,BtnL:"确定"})
                }
            }
        })

    }
    function initUploader() {
        //百度上传按钮

        var uploader = WebUploader.create({
            // swf文件路径
            swf: '../webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端
            method: 'POST',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                "id": '#filePickerd',
                "multiple": true
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: false,
            // 只允许选择图片文件
            accept: {
                title: '图片文件',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('fileQueued', function (file) {
            $.ajax({
                url: 'http://easyjiang.huizhuangfang.com.cn/aliyun/oss/policy',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (result) {
                    var suffix = get_suffix(file.name);
                    var random_name = random_string();
                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
                    uploader.options.formData.policy = result.policy;
                    uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
                    uploader.options.formData.success_action_status = 200;
                    uploader.options.formData.callback = result.callback;
                    uploader.options.formData.signature = result.signature;
                    uploader.options.server = result.action;
                    uploader.upload();
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });
        uploader.on('uploadSuccess', function (file, response) {

            $('#img1').val(response.data.filename).focus();

            $("#fileList").css("background-image", 'url("' + response.data.filename + '")');
            uploader.destroy();
            initUploader();


        });
        uploader.on('uploadError', function (file) {
            console.log('uploadError', file);
        });
    }

    // 根据路径获取后缀
    function get_suffix(filename) {
        var pos = filename.lastIndexOf('.');
        var suffix = '';
        if (pos != -1) {
            suffix = filename.substring(pos);
        }
        return suffix;
    }

    // 随机字符串
    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }

    function localhref(){
        alert("1234560");
    }
</script>

</body>
</html>